<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/changjing.css" />
		<link href="css/font.css" rel="stylesheet">
		<link href="css/animate.min.css" rel="stylesheet">
		<script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/anime.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/base.js"></script>
		<style>

		</style>
	</head>

	<body>
		<div style="position: absolute;z-index: 10; ">
			<a id="cbg" style="position: absolute;z-index: 11;"><img src="img/c-bg.jpg" /></a>
			<video id="video">
				<source src="mv/mv.mp4" type="video/mp4" />
			</video>
		</div>
		<img src="img/logo1.png" style="position:absolute;margin-top: 24px;left: 1636px;" />
		<div style="width: 3370px;height: 800px;margin: 0 auto;display: flex;">
			<div class="left-box">
			</div>
			<div class="center-box">
				<img src="img/3f 3d.png" class="img-div" style="position: absolute;left: 233px;top: 78px;"/>
				<div id="container">
					<div class="fold">
						<div class='button1'></div>
						<div class='button2'></div>
						<div class='button3'></div>
					</div>
					<div>
						<div class='button-div' style="display: none;">
							<img class="al" src="img/10F 3d.png" />
							<img src="img/10F-2.png" class="bg el" style="z-index: 2;position: absolute;top: 0;left:30px;opacity: 0;" />
							<img src="img/tuli.png" style="position: absolute;left: 1780px;top: 185px;" />
							<div id="f10">
							</div>
						</div>
						<div class='button-div' style="display: none;">
							<img class="al" src="img/9F 3d.png" />
							<img src="img/9F-2.png" class="bg el" style="z-index: 2;position: absolute;top: 0;left:0;opacity: 0;" />
							<img src="img/tuli.png" style="position: absolute;left: 1780px;top: 185px;" />
							<div id="f9"></div>
						</div>
						<div class='button-div' style="display: none;">
							<img class="al" src="img/8F 3d.png" />
							<img src="img/8F-2.png" class="bg el" style="z-index: 2;position: absolute;top: 0;left:70px;opacity: 0;" />
							<img src="img/tuli.png" style="position: absolute;left: 1780px;top: 185px;" />
							<div id="f8"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="right-box">
			</div>

		<script src="js/changjiang.js" type="text/javascript" charset="utf-8"></script>
			<script>
				$('#cbg').click(function() {
				var myVideo=document.getElementById("video");
				var cbg=document.getElementById("cbg");
				myVideo.play(); 
				cbg.style.display="none";
				setTimeout(function() {
					myVideo.parentNode.style.display="none"; 
				}, 10*1000);
				});
				var bg = anime.timeline({});
				bg.add({
						targets: '.button-div .al',
						translateY: {
							value: -150,
							duration: 1000,
							easing: 'easeOutCirc'
						},
						opacity: {
							value: 1,
							duration: 1500,
							easing: 'easeInOutQuad',
						}
					})
					.add({
						targets: '.center-box .el',
						translateY: {
							value: -50,
							duration: 2000,
							easing: 'easeInOutQuad'
						},
						opacity: {
							value: 1,
							duration: 3000,
							easing: 'easeInOutQuad',
						}
					})
					.add({
						targets: '.center-box .el',
						opacity: {
							value: 0,
							duration: 2000,
							easing: 'easeInOutQuad',
						}
					})
				document.querySelector('.center-box .button1').onclick = bg.restart;
				document.querySelector('.center-box .button2').onclick = bg.restart;
				document.querySelector('.center-box .button3').onclick = bg.restart;
			</script>
	</body>

</html>